<!-- 员工ID不对时，进行页面绑定 -->
<template>
  <div class="page page-bind">
    <van-overlay :show="true">
      <div class="wrapper">
        <div class="wrapper--body">
          <van-form
            label-width="70px"
            @submit="onSubmit">
            <van-field
              v-model="id"
              name="员工ID"
              label="员工ID"
              placeholder="请输入员工ID"
              maxlength="20"
              :rules="[{ required: true }]"
            />
            <div class="footer-button">
              <van-button
                type="info"
                native-type="submit"
                loading-text="提交中..."
                :loading="loading">
                提交
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: 'Binding',

  data() {
    return {
      id: '',
      loading: false,
    }
  },

  methods: {
    async onSubmit() {
      this.loading = true
      const { code, data } = await this.$axios
        .post('/external/qywx/bind-user', this.getParams())
        .catch(_ => _)

      this.loading = false
      if (code === 0) {
        sessionStorage.setItem('gstoken', data.gstoken)
        const { from, title } = this.$route.query
        this.$utils.replaceState(from.substr(0, from.indexOf('?')), title)
      }
    },

    getParams() {
      const { from } = this.$route.query
      const hashList = from.substr(from.indexOf('?') + 1).split('&')
      const params = {}
      hashList.forEach((_) => {
        const hash = _.split('=')
        params[hash[0]] = hash[1]
      })

      delete params.bind_user
      params.notes_id = this.id
      return params
    },
  },
}
</script>

<style lang="scss" scoped>
.page-bind {
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;

    &--body {
      width: 320px;
      padding: 16px 0;
      border-radius: 4px;
      background-color: #fff;

      .footer-button {
        margin-top: 20px;
        text-align: center;

        ::v-deep .van-button {
          padding: 0 40px;
          height: 36px;
        }
      }
    }
  }
}
</style>
